<template>
  <Transition name="slide-top">
    <div v-if="showRecharge" class="recharge flex flex-col">
      <PageHead
        :go-back-icon="close"
        title="充值"
        :show-more="false"
        @back="back"
      >
      </PageHead>
      <div class="methods flex align-top">
        <div class="title">充值方式</div>
        <div class="flex-1 flex">
          <div class="flex-1">
            <div class="flex">
              <img src="" />
              <div class="text-dark">工商银行(2134)</div>
            </div>
            <div class="text-999 mt-4">单日交易限额￥50000.00</div>
          </div>
          <div>
            <img :src="arrowRight" width="16" height="16" />
          </div>
        </div>
      </div>

      <div class="rechargeMoney-container flex-1 flex flex-col">
        <div class="text-dark mb-8">充值金额</div>
        <div>
          <div class="input flex gc-4">
            <div class="text-bold text-28 text-dark">￥</div>
            <div class="rechargeMoney">
              {{ rechargeMoney }}
            </div>
          </div>
          <div class="divider"></div>
        </div>

        <div class="mt-32">
          <div class="divider"></div>
          <div class="card flex gc-4 align-center">
            <div>
              <img :src="diamond" width="42" />
            </div>
            <div class="flex-1">
              <div class="text-14 text-dark">可充值到零钱后消费</div>
              <div class="text-999 text-left mt-2">
                有收益，可免费转回银行卡
              </div>
            </div>
            <div>
              <img :src="arrowRight" width="16" />
            </div>
          </div>
          <div class="divider"></div>
        </div>
      </div>
      <Keyboard></Keyboard>
    </div>
  </Transition>
</template>

<script setup lang="ts">
  import PageHead from '@/views/components/page-head/PageHead.vue';
  import arrowRight from '@/assets/images/arrow-right.png';
  import { onUnmounted, ref, watch } from 'vue';
  import { useEventBus } from '@vueuse/core';
  import { showLoading } from '@/views/components/loading/loading';
  import { rechargeMoney, showRecharge } from './recharge';
  import diamond from '../../assets/diamond-fill.png';
  import close from '../../assets/close.png';
  import Keyboard from './keyboard/Keyboard.vue';
  import { showComfirm } from './comfirm/data';

  const bus = useEventBus('keyboard');

  bus.on((_, key) => {
    if (key === 'x') {
      rechargeMoney.value = rechargeMoney.value.slice(0, -1);
    } else if (key === '.') {
      if (rechargeMoney.value.indexOf('.') === -1) {
        rechargeMoney.value += '.';

        if (rechargeMoney.value.startsWith('.')) {
          rechargeMoney.value = `0${rechargeMoney.value}`;
        }
      }
    } else if (key === '确定') {
      const callback = () => {
        showComfirm.value = true;
      };
      showLoading(
        {
          type: 'loading',
        },
        callback
      );
    } else {
      rechargeMoney.value += key;
    }
  });
  const back = () => {
    showRecharge.value = false;
    rechargeMoney.value = '';
  };
</script>

<style lang="scss" scoped>
  .recharge {
    position: fixed;
    width: 100%;
    height: 100vh;
    z-index: 10;
    top: 0;
    left: 0;
    background-color: var(--background-color);
    top: 0;
    .methods {
      min-height: 84px;
      background-color: var(--background-color);
      padding: 24px 32px;
      .title {
        width: 100px;
      }
    }
    .rechargeMoney-container {
      background-color: white;
      border-radius: 8px 8px 0 0;
      padding: 24px 32px;
      .input {
        padding-bottom: 8px;
      }
      .rechargeMoney {
        font-size: 36px;
        line-height: 42px;
        height: 42px;
        color: #111;
      }
      .card {
        margin: 8px 0;
      }
    }
  }
</style>
